<template>
    <view class="andry-goods-detail">
        <StatusBar v-show="isStatusBar" />
        <view v-if="bannerList.length>0" >
            <Banner id="goods" :banner-list="bannerList" />
        </view>
        <view class="cell productinfo">
            <view class="flex items-center justify-between">
                <view class="money">
                    <span class="unit">￥</span>
                    <span class="price">{{ productdetails.price }}</span>
                </view>
                <view>总库存{{ productdetails.stockStatusName }}</view>
            </view>
            <view class="title">
                <span class="sub-title">{{ productdetails.name }}</span>
            </view>
            <view class="tag">{{ productdetails.description }}</view>
            <view class="jifen">
                <span class="tags">可用{{ productdetails.point }}积分换购</span>
            </view>
        </view>
        <view class="cell productinfo">
            <view class="cell-option" @click="onCartShow">
                <view class="checked">
                    <view class="detail">
                        <span class="option-title">选择</span>
                        <span class="txt">{{currentspec?currentspec:'请选择规格'}}</span>
                    </view>
                    <view>
                        <image class="chevronright" :src="IMG_URL2+'common/chevron-right.svg'"></image>
                    </view>
                </view>
            </view>
            <view class="cell-option">
                <view class="address" @click="gotoAddress">
                    <view class="detail">
                        <span class="option-title">送至</span>
                        <up-icon name="map" size="14" color="rgba(214, 142, 68, 1)" :bold="true" />
                        <span class="txt">{{address.provinceCityArea }}</span>
                    </view>
                    <view>
                        <image class="chevronright" :src="IMG_URL2+'common/chevron-right.svg'"></image>
                    </view>
                </view>
            </view>
        </view>
        <view class="detail-cell" style="padding-bottom: 150rpx;">
            <u-tabs :list="chartTabs" :current="currentChartTab" @change="onChartTabChange" lineColor="#c4996c"
                itemStyle="flex:1; height: 48px;" :activeStyle="{
                    color: '#c4996c',
                    fontWeight: 'bold'
                }" :inactiveStyle="{
                    color: '#333',
                    fontSize: '28rpx'
                }"></u-tabs>
            <view v-if="currentChartTab == 0">
                <mp-html :content="introduceList"></mp-html>
            </view>
            <view v-if="currentChartTab == 1">
                <view class="inventory-table">
                    <view class="inventory-headers">
                        <view >店铺：{{ shopName }}</view>
                        <view >库存:{{ totalInventory }}</view>
                    </view>
                    <view v-if="showType == 1">
                        <view v-for="(item,index) in specifList" :key="index" class="inventory-row">
                            <view class="specname">
                                <view class="name">{{ item.name }}</view>
                            </view>
                            <view>
                                <view v-for="(spec, specIndex) in item.sizelist" :key="specIndex" class="speccontent">
                                    <view class="spec-name">{{ spec.sizevalue.value }}</view>
                                    <view class="spec-quantity">库存x{{ spec.inventory }}</view>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view v-if="showType == 2">
                        <up-scroll-list>
                            <view class="table">
                                <view class="table-header header-cell">
                                    <view class="cell color-cell">尺码</view>
                                    <view v-for="size in sizes" :key="size" class="cell1">
                                        <u-text :text="size" size="14" color="#666666"></u-text>
                                    </view>
                                </view>
                                <view v-for="(row, index) in inventory" :key="index" class="table-row">
                                    <view class="cell color-cell">
                                        <u-text :text="row.color" size="14" center="center" color="#666666"></u-text>
                                    </view>
                                    <view v-for="(quantity, sizeIndex) in row.quantities" :key="sizeIndex" class="cell"
                                        :class="{ 'unavailable': quantity === '/' }">
                                        <u-text :text="quantity" size="14"
                                            :color="quantity === '/' ? '#999999' : '#333333'"></u-text>
                                    </view>
                                </view>
                            </view>
                        </up-scroll-list>
                    </view>
                    
                </view>
            </view>
        </view>
        <view class="bottom">
            <view class="bottom-option" @click="openConversationList">
                <view class="item">
                    <img :src="IMG_URL2+'mine/service.svg'" />
                    <span>客服</span>
                </view>
            </view>
            <view class="bottom-option" @click="onCollect">
                <view class="item">
                    <img :src="isCollect ? IMG_URL2+'mine/star-filled.svg' : IMG_URL2+'mine/star.svg'" />
                    <span>收藏</span>
                </view>
            </view>
            <view class="bottom-option" @click="onCartPage(1)">
                <view class="item">
                    <div class="bade">
                        <up-badge :type="cunttype" :value="cuntvalue" bgColor="#f00"></up-badge>
                    </div>
                    <img :src="IMG_URL2+'mine/cart.svg'" />
                    <span>购物车</span>
                </view>
            </view>
            <view class="button">
                <view class="left" @click="onCartPage(2)">
                    加入购物车
                </view>
            </view>
        </view>
        <view v-if="showType==1">
            <Check v-if="shopCheckShow" :specif-list="specifList" :spec-type="specType" @close="shopCheckShow = false"
            @cart="onCartGoods" @pay="onPayGoods" />
        </view>
        <view v-if="showType==2">

        </view>
        <BackTop :backTop="backTop" />
    </view>
</template>

<script setup>
import { getCurrentInstance } from "vue";
import { IMG_URL2 } from "@/config";
import StatusBar from "@/components/status-bar.vue";
import Banner from "./components/banner.vue";
import Check from "./components/check.vue";
import BackTop from "@/components/back-top.vue";
import { getPosterFilePath, removePosterFilePath } from "@/service";
import _superantUtils from "@/utils/util";
import Shop from "@/static/logo.png";
import Cover from "@/static/logo.png";
import QrCode from "@/static/logo.png";
import { getStorage } from "@/utils/storage";
import { shopApi } from "@/api";

let currentspec=ref('')
const instance = getCurrentInstance();
const isStatusBar = ref(false);
const bannerList = ref([]);
let bannerList1 =ref([])
const bgColor = ref("rgba(0, 0, 0, 0)");
const currentChartTab = ref(0)
const shopName = ref(getStorage('shopName'))
let showType = ref(1) 
// 地址id
const address = ref({
    id: "",
    provinceCityArea: "",
});
let shopReceiveId = ref(null)
const chartTabs = [
    { name: '图文详情' },
    { name: '店铺库存' }
]
const cunttype = ref('warning');  
const cuntvalue = ref(100);  
const storeName = ref('店铺: XXX店铺名称');
const totalInventory = ref('');
const sizes = ref([]);


const inventory = ref([
    {
        color: '黑色V领',
        quantities: ['70', '75', '80', '85', '90']
    },
    {
        color: '白色',
        quantities: ['0', '3', '0', '0', '2']
    },
    {
        color: '黑色',
        quantities: ['0', '20', '6', '20', '0']
    },
    {
        color: 'B',
        quantities: ['4', '0', '0', '7', '0']
    },
    {
        color: 'B',
        quantities: ['/', '/', '0', '0', '/']
    }
]);

let productId = ref(null)
let addcartList = ref(null)

let productdetails = reactive({
    price: '',
    name: '',
    point: 0,
    description:'',
    stockStatusName: '',
    receiveProvince: '', //省
    receiveCity: '',// 市
    receiveStreet: '', // 区
    receiveAddress: '',// 地址
    totalStock:''
})
const tabList = ref([
    {
        id: "goods",
        name: "商品"
    },
    {
        id: "evaluate",
        name: "评价"
    },
    {
        id: "recommend",
        name: "推荐"
    },
    {
        id: "detail",
        name: "详情"
    }
]);
const scrollHeight = ref({
    evaluateHeight: "",
    recommendHeight: "",
    detailHeight: ""
});

const current = ref(0);
const introduceList = ref('');
const isCollect = ref(true);
// 规格
const specifList = ref([]);
const shopCheckShow = ref(false);
const specType = ref(1);
// 海报
const overlayShow = ref(false);
const posterInfo = ref({
    cover: Cover,
    storeLogo: Shop,
    storeName: "大黑店铺",
    shopName: "SK-II神仙水160ml精华液双支装sk2护肤品skii化妆品礼盒520情人节礼物",
    price: "2580.00",
    qrCode: QrCode
});
const scrollShow = ref(false);
// 返回顶部
const backTop = ref(0);
const onChartTabChange = (item) => {
    currentChartTab.value = item.index

}
// 获取购物车数
const getpurchaseCartcount = () => {
	shopApi.PURCHASECARTCOUNT().then((res) => {
		if (res.code == 200) {
            cuntvalue.value = res.result
		}else{
            uni.showToast({
                title: res.errMsg,
                icon: "success",
            });
        }

	})

};
const getDataDetail = (Id) => {
    shopApi.CATEGORYGETFRONTPRODUCTDETAILBYID({ id: Id }).then((res) => {
        if (res.code == 200) {
            // introduceList.value = [matchRichHtml(res.result.picDetail)]
            // console.log(res.result.images.split(','),'111')
            introduceList.value = matchRichHtml(res.result.picDetail)
            bannerList1.value = res.result.images
            bannerList.value = res.result.images?res.result.images.split(','):''
            productdetails.price = res.result.price
            productdetails.name = res.result.name
            productdetails.point = res.result.point
            
            productdetails.description = res.result.description
            productdetails.stockStatusName = res.result.stockStatusName

            productdetails.receiveProvince = res.result.receiveProvince //省
            productdetails.receiveCity = res.result.receiveCity // 市
            productdetails.receiveStreet = res.result.receiveStreet // 区
            productdetails.receiveAddress = res.result.receiveAddress // 地址

            productdetails.code = res.result.code

            
            productdetails.totalStock = res.result.totalStock 

            isCollect.value = res.result.collect

            let newdata = res.result.skuList;
            totalInventory.value = newdata.reduce((acc, sku) => acc + sku.inventory, 0);

            

            for (let i = 0; i < newdata.length; i++) {
                newdata[i].newattributeList=resetArray(newdata[i].attributeList)
            }
            console.log(newdata,'newdata');
            if (newdata.length > 0 && Array.isArray(newdata[0].newattributeList) && newdata[0].newattributeList.length > 3) {
                console.log(showType.value,'showType.value');
                showType.value = 2;
            }

            // const groupedInventory = groupByColor(newdata);

            // console.log(groupedInventory,'groupedInventor');
            

            const groupedMap = new Map();
            // console.log(newdata,'newdata');
            newdata.forEach((sku) => {
                // 提取颜色、尺寸和库存
                const color = sku.newattributeList.find((attr) => attr.name === "颜色").value;
                const colorvalue=sku.newattributeList.find((attr) => attr.name === "颜色")
                const sizeValue = sku.newattributeList.find((attr) => attr.name === "尺寸")
                const size = sku.newattributeList.find((attr) => attr.name === "尺寸").value;
                const inventory = sku.inventory;

                // 判断库存状态
                let status = "无货";
                if (inventory > 3) status = "库存充足";
                else if (inventory > 0) status = "库存紧张";

                let num = 0

                // 构建当前 SKU 数据
                const sizeData = { size,sizevalue:sizeValue,colorvalue:colorvalue, inventory, status,num,originalSku: sku };

                // 将数据按颜色分组
                if (!groupedMap.has(color)) {
                groupedMap.set(color, []); // 初始化分组
                }
                groupedMap.get(color).push(sizeData);
            });

            // 2. 转换为目标数组格式
            const newresult = [];
            let price = res.result.price
            groupedMap.forEach((sizelist, name) => {
                newresult.push({ name,price, sizelist,checked:false });
            });

            specifList.value = newresult


            console.log(newresult,'newresult');


        } else{
            uni.showToast({
                title: res.errMsg,
                icon: "success",
            });
        }

    })
}
// 函数：按颜色分组并提取尺寸库存数据
function groupByColor(skuList) {
  const groupedData = {};

  skuList.forEach(sku => {
    let color = "";
    let sizes = [];

    // 提取颜色和尺寸
    sku.attributeList.forEach(attr => {
      if (attr.name === "颜色") {
        color = attr.value;
      } else if (attr.name === "尺寸") {
        sizes.push(attr.value);
      }
    });

    // 初始化颜色组
    if (!groupedData[color]) {
      groupedData[color] = {
        color: color,
        quantities: []
      };
    }

    // 添加尺寸库存数据
    sizes.forEach(size => {
      groupedData[color].quantities.push({
        size: size,
        inventory: sku.inventory
      });
    });
  });

  return Object.values(groupedData); // 转换为数组
}
// 处理SKU数据转换为表格格式
const processSkuData = (skuList) => {
  // 获取所有唯一的尺寸值
  const sizeSet = new Set()
  const colorMap = new Map()

  // 第一次遍历：收集所有唯一的尺寸和颜色
  skuList.forEach(sku => {
    const colorAttr = sku.attributeList.find(attr => attr.name === '颜色')
    const sizeAttr = sku.attributeList.find(attr => attr.name === '尺寸' && attr.sort === 2)
    
    if (sizeAttr) {
      sizeSet.add(sizeAttr.value)
    }
    
    if (colorAttr) {
      if (!colorMap.has(colorAttr.value)) {
        colorMap.set(colorAttr.value, new Map())
      }
    }
  })

  // 转换尺寸集合为数组并排序
  sizes.value = Array.from(sizeSet).sort((a, b) => Number(a) - Number(b))

  // 第二次遍历：填充库存数据
  skuList.forEach(sku => {
    const colorAttr = sku.attributeList.find(attr => attr.name === '颜色')
    const sizeAttr = sku.attributeList.find(attr => attr.name === '尺寸' && attr.sort === 2)
    
    if (colorAttr && sizeAttr) {
      const colorInventoryMap = colorMap.get(colorAttr.value)
      colorInventoryMap.set(sizeAttr.value, sku.inventory)
    }
  })

  // 转换为最终的表格数据格式
  const tableData = []
  
  // 为每个颜色创建一个数据行
  colorMap.forEach((sizeMap, color) => {
    const quantities = sizes.value.map(size => {
      const inventory = sizeMap.get(size)
      return inventory ? inventory.toString() : '/'
    })
    
    tableData.push({
      color,
      quantities
    })
  })

  inventory.value = tableData
}

const resetArray = (inputArray)=>{
    inputArray.forEach(element => {
        element.num=1
    });
    return Object.values(inputArray.reduce((acc, current) => {
            const key = `${current.name}-${current.sort}`;
            acc[key] = current;
            return acc;
        }, {}));
    
}
// 获取默认收货地址
const getAddressDefault = () => {
    shopApi.SHOPRECEIVEGGETDEFAULTADDRESS().then((res) => {
        if (res.code == 200) {
            const data = res.result;
            address.value = {
                shopReceiveId: data.shopReceiveId,
                provinceCityArea: data.province + data.city + data.street + data.detailAddress,
            };
            shopReceiveId.value = data.shopReceiveId
        }else{
            uni.showToast({
                title: res.errMsg,
                icon: "error",
            });
        }
    });
};
onLoad((option) => {
    // 富文本内容格式化
    // introduceList.value[0].url = matchRichHtml(introduceList.value[0].url);
    // 初始化小程序和APP状态栏的颜色
    uni.setNavigationBarColor({
        frontColor: "#000000",
        backgroundColor: "#ffffff"
    });
    console.log(option);
    if (option.id) {
        productId.value = option.id
        getDataDetail(option.id)
    }
    getpurchaseCartcount()
    getAddressDefault()
});

onShow(() => {
    // getAddressDefault()
    uni.$on("check-address", (data) => {
        address.value = {
            shopName: data.shopName,
            city: data.city,
            cityCode: data.cityCode,
            detailAddress: data.detailAddress,
            isDefault: data.isDefault,
            name: data.name,
            phone: data.phone,
            province: data.province,
            provinceCode: data.provinceCode,
            shopId: data.shopId,
            shopName: data.shopName,
            shopReceiveId: data.shopReceiveId,
            street: data.street,
            streetCode: data.streetCode,
            provinceCityArea: data.province + data.city + data.street + data.detailAddress,
        };
        shopReceiveId.value = data.shopReceiveId
    });
});



onMounted(() => {
    initScrollHeight();
    console.log("元素高度", scrollHeight.value);
});

// 监听页面滚动(一键置顶，tabs吸顶)
onPageScroll((e) => {
    // console.log("距离", e.scrollTop);
    backTop.value = e.scrollTop;
    // isStatusBar.value = e.scrollTop > 0;
    // bgColor.value = e.scrollTop == 0 ? "rgba(255,255,255,0)" : "rgba(255,255,255,1)";
    // let top = Math.floor(e.scrollTop);
    // if (top >= 0 && top < scrollHeight.value.evaluateHeight) {
    //     if (current.value != 0) current.value = 0;
    // } else if (top >= scrollHeight.value.evaluateHeight && top < scrollHeight.value.recommendHeight) {
    //     if (current.value != 1) current.value = 1;
    // } else if (top >= scrollHeight.value.recommendHeight && top + 1 < scrollHeight.value.detailHeight) {
    //     if (current.value != 2) current.value = 2;
    // } else {
    //     if (current.value != 3) current.value = 3;
    // }
});

const initScrollHeight = () => {
    getElementInfoById("evaluate").then((res) => {
        scrollHeight.value.evaluateHeight = Math.floor(res.top);
    });
    getElementInfoById("recommend").then((res) => {
        scrollHeight.value.recommendHeight = Math.floor(res.top);
    });
    getElementInfoById("detail").then((res) => {
        scrollHeight.value.detailHeight = Math.floor(res.top);
    });
};

// 获取当前元素距离顶部的距离
const getElementInfoById = (elementId) => {
    return new Promise((resolve) => {
        uni
            .createSelectorQuery()
            .select("#" + elementId)
            .boundingClientRect((data) => {
                resolve(data);
            })
            .exec();
    });
};

// 返回上一页
const onGoBack = () => {
    uni.navigateBack({
        delta: 1
    });
};

// 加入购物车-显示规格列表
const onCartShow = () => {
    specType.value = 1;
    shopCheckShow.value = true;
};
// 去收货地址列表
const gotoAddress = () => {
    uni.navigateTo({
        url: `/pages/user/address/index?type=goods&shopReceiveId=${shopReceiveId.value}`
    });
}


// 打开会话列表
const openConversationList = () => {
    uni.navigateTo({ url: '/pages/user/customerservice' });
};

// 跳到购物车
const onCartPage = (type) => {
    if(type == 1) {
        uni.switchTab({
            url: "/pages/index/cart"
        });
    }else{
        if (!currentspec.value|| !addcartList.value) {
            // If no spec selected, show specification selection popup
            specType.value = 1;
            shopCheckShow.value = true;
            return;
        }

        addCart(addcartList.value)

       
    }
};

const formatSelectedSpec = (colorValue, sizeValue) => {
  return `${colorValue};${sizeValue}`;
};

// 加入购物车
const onCartGoods = (itemlist) => {
    
    shopCheckShow.value = false;
    
    let selectedSpecs = [];
    itemlist.forEach(item => {
        item.sizelist.forEach(element => {
            if(element.num > 0) {
                selectedSpecs.push(formatSelectedSpec(element.colorvalue.value, element.sizevalue.value));
            }
        });
    });
    currentspec.value = selectedSpecs.join('、');

    uni.showToast({
        title: "已选择商品规格",
        icon: "success",
        mask: true
    });
    console.log(selectedSpecs,'selectedSpecs')

    itemlist.forEach(item => {
       
    });
    addCart(itemlist); 
}
    
const onCartGoods1 = (item) => {
    
    shopCheckShow.value = false;
    
    let selectedSpecs = [];
    item.sizelist.forEach(element => {
        if(element.num > 0) {
            selectedSpecs.push(formatSelectedSpec(element.colorvalue.value, element.sizevalue.value));
        }
    });
    currentspec.value = selectedSpecs.join('、');

    uni.showToast({
        title: "已选择商品规格",
        icon: "success",
        mask: true
    });

    // addcartList.value=item
    addCart(item)

};
const addCart = (itemlist) => {
    console.log(itemlist, 'itemlist');
    let newproducts = [];
    itemlist.forEach(item => {
        if(item.sizelist.length > 0) {
            item.sizelist.forEach(element => {
                if(element.num > 0) {
                    newproducts.push({
                        name: productdetails.name,
                        productId: productId.value,
                        productImg: bannerList1.value,
                        productSkuId: element.sizevalue.productSkuId,
                        quantity: element.num,
                        skuImg: element.originalSku.skuPic,
                        skuSpec: `${element.colorvalue.value};${element.sizevalue.value}`,
                        unitPrice: productdetails.price,
                        productSkuCode: element.originalSku.skuCode,
                        productCode: productdetails.code,
                    });
                }
            });
        }
    });

    let params = {
        name: productdetails.name,
        productId: productId.value,
        productImg: bannerList1.value,
        productSkuId: itemlist[0].productSkuId, // Assuming you want the first item's SKU ID
        products: newproducts
    };

    shopApi.PURCHASECARTSAVEORUPDATEBATCH(params).then((res) => {
        if (res.code == 200) {
            uni.showToast({
                title: "已加入到购物车",
                icon: "success",
                mask: true
            });
            setTimeout(() => {
                uni.switchTab({
                    url: "/pages/index/cart"
                });
            }, 2000);
        } else {
            uni.showToast({
                title: res.errMsg,
                icon: "none",
                duration: 1000
            });
        }
    });
};
const onPayGoods = (spec) => {
    shopCheckShow.value = false;
    uni.navigateTo({
        url: "/pagesA/order/confirm?spec=" + JSON.stringify(spec) + "&type=goods"
    });
};

// 收藏/取消收藏
const onCollect = () => {
    isCollect.value = !isCollect.value;
    AddOrCancel()
};

// 取消或收藏商品
const AddOrCancel = () => {
    let data = {
        collect: isCollect.value,
        productId: productId.value
    }
    shopApi.COLLECTADDCOLLECT(data).then((res) => {

        if (res.code == 200) {
            uni.showToast({
                title: isCollect.value?'收藏成功':'已取消收藏',
                icon: "none",
                duration: 1000
            });

        } else {
            uni.showToast({
                title: '取消收藏',
                icon: "none",
                duration: 1000
            });
        }

    })
}

// tab切换和锚点定位
const onTab = (item, index) => {
    current.value = index;
    const query = uni.createSelectorQuery(instance);
    query
        .select("#" + item.id)
        .boundingClientRect((data) => {
            console.log(data, "data");
            if (data) {
                uni.pageScrollTo({
                    scrollTop: data.top + (backTop.value || 0), // pageScrollTop为页面当前已滚动的距离
                    duration: 300 //过渡时间
                });
            }
        })
        .exec();
};

// 商品图片转本地图片
const goodsImageLocal = (goods_image) => {
    // 图片的路径，可以是相对路径，临时文件路径，存储文件路径，网络图片路径
    uni.getImageInfo({
        src: goods_image,
        success: function (image) {
            posterInfo.value.cover = image.path;
        }
    });
};

// 小程序码
const createGoodsShare = (qrCode_image) => {
    // 图片的路径，可以是相对路径，临时文件路径，存储文件路径，网络图片路径
    uni.getImageInfo({
        src: qrCode_image,
        success: function (image) {
            posterInfo.value.qrCode = image.path;
        }
    });
};


// 保存海报图片
const savePoster = () => {
    let filePath = getPosterFilePath();
    _superantUtils.downloadPicture(filePath);
};

// 关闭海报遮罩层
const onOverlayShow = () => {
    overlayShow.value = false;
    scrollShow.value = false;
};

const decimal = (value, type) => {
    return value.split(".")[type];
};

// 富文本内容格式化
const matchRichHtml = (data) => {
    if (!data) return '';
    
    // 如果 data 是对象且有 data 属性
    const content = typeof data === 'object' ? data.data : data;
    
    // 确保 content 是字符串
    if (typeof content !== 'string') return '';
    
    return content.replace(/< img/g, '<img');
};
</script>

<style lang="scss">
// APP窗口背景色默认白色，需用此种方式调整窗口背景色
page {
    background-color: #ededed;
}
</style>
<style lang="scss" scoped>
.andry-goods-detail {
    .header {
        position: fixed;
        top: 0;
        /* #ifdef APP-PLUS */
        top: var(--status-bar-height);
        /* #endif */
        z-index: 999;
        width: 100%;
        height: 44px;
        padding: 0rpx 12rpx 0rpx 20rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;

        .left-option,
        .right-option {
            display: flex;
            align-items: center;

            .left-image {
                margin-right: 12rpx;
                width: 44rpx;
                height: 44rpx;
                padding: 8rpx;
                box-sizing: border-box;
            }

            .right-image {
                margin-right: 12rpx;
                padding: 8rpx;
                box-sizing: border-box;
            }

            image {
                width: 44rpx;
                height: 44rpx;
            }
        }

        .resetImage {
            display: flex;
            background: rgba(0, 0, 0, 0.5);
            border-radius: 50%;
        }
    }
    .productinfo{
        background: #fff;
        padding: 24rpx;
        box-sizing: border-box;
    }

    .dark_anchor {
        height: 44px;
        margin-top: -44px;
    }

    .tabs {
        display: flex;
        justify-content: start;

        .item {
            margin-right: 20rpx;
        }
    }

    .active {
        color: rgba(214, 142, 68, 1);
    }

    .inventory-table {
        background-color: #ffffff;
        border-radius: 16rpx;
        padding: 32rpx;
        box-sizing: border-box;
        .inventory-row{
            .specname{
                font-size: 28rpx;
                font-weight: 500;
                color: #333333;
                margin-bottom: 24rpx;
    
                .name{
                    display: inline-block;
                    background: rgba(243, 243, 243, 1);
                    padding: 4rpx 20rpx;
                    box-sizing: border-box;
                    border-radius: 10rpx;
                    font-size: 24rpx;
                }
            }
            .speccontent{
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 20rpx;
                .spec-name{
                    font-size: 24rpx;
                    color: rgba(0, 0, 0, 0.9);
                }
                .spec-quantity{
                    color: rgba(0, 0, 0, 0.4);
                    font-size: 24rpx;
                }
            }
        }
        .inventory-headers {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 32rpx;
        }

        .table {
            display: inline-block;
            border-collapse: collapse;

            .table-header,
            .table-row {
                display: flex;
                border-bottom: 1rpx solid #f0f0f0;
            }

            .cell,.cell1 {
                padding: 2rpx 8rpx;
                text-align: center;
                min-width: 100rpx;
                box-sizing: border-box;
                &:first-child {
                    text-align: center;
                    min-width: 100rpx;
                }
            }

            .header-cell {
                background-color: #fafafa;
            }

            .cell {
                &.color-cell {
                    color: #666666;
                }

                &.unavailable {
                    color: #999999;
                }
            }
        }
    }

    .cell, .cell1 {
        // background: #ffffff;
        // padding: 20rpx 28rpx;
        margin: 20rpx;
        border-radius: 16rpx;
    }

    .detail-cell {
        background: #ffffff;
        padding: 20rpx 28rpx;
        border-radius: 16rpx;
        box-sizing: border-box;
    }

    .tag {
        margin-top: 20rpx;
        font-size: 26rpx;
        color: #999999;
        margin-bottom: 12rpx;
    }

    .jifen {
        font-family: PingFang SC;

        .tags {
            color: rgba(214, 142, 68, 1);
            border: 1rpx solid rgba(214, 142, 68, 1);
            font-size: 24rpx;
            padding: 0 8rpx;
            line-height: 20px;
            font-weight: 400;
            box-sizing: border-box;
        }
    }


    .money {
        color: rgba(193, 122, 50, 1);
    }

    .price {
        font-size: 48rpx;
        font-weight: bold;
    }

    .unit {
        font-size: 28rpx;
    }

    .title {
        margin-top: 20rpx;
        font-weight: bold;
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;

        .type {
            background: rgba(214, 142, 68, 1);
            color: #ffffff;
            font-size: 26rpx;
            padding: 4rpx 12rpx;
            box-sizing: border-box;
            margin-right: 8rpx;
            border-radius: 8rpx;
        }

        .sub-title {
            font-size: 36rpx;
        }
    }

    .cell-option {
        margin-top: 20rpx;
        font-size: 28rpx;

        .option-title {
            display: flex;
            align-items: center;
            margin-right: 20rpx;
            color: #999999;
        }

        .detail {
            display: flex;
            flex: 1;
            justify-content: space-between;
            align-items: baseline;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

            .txt {
                flex: 1;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
    }

    .checked {
        display: flex;
        .chevronright {
            width: 16px;
            height: 16px;
        }
    }

    .address {
        display: flex;
        justify-content: space-between;
        white-space: nowrap;
        .chevronright {
            width: 16px;
            height: 16px;
        }
    }

    .service {
        display: flex;
    }

    .service-detail {
        background-color: rgba(250, 53, 52, 0.1);
        color: rgba(214, 142, 68, 1);
        padding: 8rpx 20rpx;
        box-sizing: border-box;
        border-radius: 8rpx;
        display: flex;
        flex: 1;
        justify-content: space-between;
        align-items: baseline;
    }

    .cell-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20rpx;

        &-line {
            background: rgba(214, 142, 68, 1);
            width: 6rpx;
            height: 34rpx;
            margin-right: 8rpx;
        }

        &-title {
            font-weight: bold;
        }

        &-sub-title {
            display: flex;
            align-items: flex-end;
            font-size: 28rpx;
            font-weight: bold;
        }

        &-other {
            display: flex;
            font-size: 24rpx;
        }
    }

    .recommend-cell {
        margin: 0rpx -16rpx;
    }

    .bottom {
        position: fixed;
        bottom: 0;
        width: 100%;
        padding: 10rpx 24rpx 30rpx;
        box-sizing: border-box;
        // height: 44px;
        line-height: 12px;
        background-color: #ffffff;
        z-index: 999;
        display: flex;
        justify-items: center;
        justify-content: space-around;

        .bottom-option {
            display: flex;
            align-items: center;
        }

        .item {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 4rpx;
            font-size: 24rpx;
            position: relative;
            image {
                width: 44rpx;
                height: 44rpx;
            }
            .bade{
                position: absolute;
                top: -10rpx;
                right: -10rpx;
                z-index: 999;
            }
        }

        .button {
            display: flex;
            align-items: center;
            width: 414rpx;

            .left {
                width: 100%;
                height: 68rpx;
                line-height: 68rpx;
                padding: 0rpx 24rpx;
                box-sizing: border-box;
                background-color: rgba(214, 142, 68, 1);
                color: #ffffff;
                font-size: 28rpx;
                border-radius: 50rpx;
                text-align: center;
            }

            .right {
                margin-left: 24rpx;
                height: 68rpx;
                line-height: 68rpx;
                padding: 0rpx 24rpx;
                box-sizing: border-box;
                background-color: #000000;
                color: #ffffff;
                font-size: 28rpx;
                border-radius: 50rpx;
            }
        }
    }

    .poster-container {
        height: 100vh;

        .save-btn {
            width: 608rpx;
            height: 80rpx;
            line-height: 80rpx;
            background: rgba(214, 142, 68, 1);
            border-radius: 80rpx;
            color: #ffffff;
        }
    }

    @keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }
}
</style>
